<script setup name="UserquestionInfo">
import { reactive, ref,defineEmits } from 'vue'
import {saveApi} from "@/api/practice/userquestion";
const {proxy} = getCurrentInstance();

//自定义事件
const emit = defineEmits(['flush']);
// 表单数据
const formData = ref({
  qid: 0,
  title:'',
  nums:0,
  dept: '',
  name: '',
  answers: [],
  questions:[]
})
// 表单验证
const formRules = reactive({
  dept: [
    { required: true, message: '请输入部门名称', trigger: 'blur' }
  ],
  name: [
    { required:true,min:2,max:20, message: '请输入正确的名字', trigger: 'blur' }
  ]
})
// 提交验证
const formRef = ref()
const onSubmit = () => {

  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      saveApi(formData.value).then(response => {
          proxy.$modal.msgSuccess("恭喜你，问卷已完成！")
          emit("flush")
          state.value = false
        })

    }
  });
}

// 对话框状态
const state = ref(false)
// 暴露
defineExpose({
  state,
  formData
})
</script>
<template>

    <el-dialog
        v-model="state"
        title="做调查问卷"
        width="600"
        :before-close="() => (state = false)"
    >
      <!-- 内容 -->
      <el-form
          v-if="state"
          size="large"
          label-width="80"
          :model="formData"
          :rules="formRules"
          ref="formRef"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="部门" prop="dept">
              <el-input placeholder="请输入部门名称" v-model="formData.dept" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input placeholder="请输入姓名" v-model="formData.name" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="问卷">
              <el-input :disabled="true" v-model="formData.title" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人数">
              <el-input :disabled="true" v-model="formData.nums" />
            </el-form-item>
          </el-col>
        </el-row>
        <!--      加载问题： 输入问题对应的回答-->
        <div v-for="i in formData.questions.length">
          <el-form-item :label="`问题-${i}`">
            <el-input :disabled="true" v-model="formData.questions[i-1]" />
          </el-form-item>
          <el-form-item :label="`回答-${i}`">
            <el-input placeholder="请输入你的回答" v-model="formData.answers[i-1]"/>
          </el-form-item>
        </div>

        <el-form-item label="">
          <el-button type="primary" @click="onSubmit">确定提交</el-button>
          <el-button type="default" @click="state = false">取消</el-button>
        </el-form-item>
      </el-form>
      <!-- 内容 -->
    </el-dialog>

</template>
